<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8" />
		<title></title>
		<style>
			<style>body,
			html {
				height: 100%;
			}
			
			* {
				margin: 0;
				padding: 0;
			}
			
			.fixedBg {
				min-height: 1500px;
				background-image: url(img/bgi.jpg);
				background-position: center center;
				background-repeat: no-repeat;
				background-attachment: fixed;
				background-size: cover;
			}
			
			.testBefore,
			.testAfter {
				background: orange;
				width: 100%;
				height: 300px;
				text-align: center;
			}
			
			h1 {
				color: #fff;
				font-size: 100px;
				line-height: 300px;
			}
		</style>
		</style>

	</head>

	<body>
		<!--背景图片固定，但是当我们滚动滚动条的时候感觉背景图片也随着滚动条上下滚动，
		只要固定的元素的背景background-size值设置为cover，
		background-attachment的值设置为fixed，这样就实现了单页面的背景固定和滚动效果。 -->
		
		<div class="testBefore">
			<h1>BEFORE</h1>
		</div>
		<div class="fixedBg"></div>
		<div class="testAfter">
			<h1>AFTER</h1>
		</div>
	</body>

</html>